<template>
	<!-- 收货-头部begin -->
	<div class="flex">
		<div class="avatar" @click="changeUserPageShow"></div>

		<div class="serch">
			<!-- <input type="text" placeholder="搜索食材、菜谱" /> -->
			<slot name="searchInput"></slot>
		</div>

		<div class="menuItem">
			<!-- 图标 -->
			<img class="menuItem_Img" src="@/assets/images/菜单.png" alt="" />
		</div>
	</div>
	<!-- 收货-头部end -->
</template>

<script>
export default {
	name: 'BaseHeader',
	methods: {
		/** @method 修改用户页面收缩状态 */
		changeUserPageShow() {
			this.$store.commit('changeUserPageShow');
		},
	},
};
</script>

<style scoped>
.flex {
	width: 100%;
	display: flex;
	flex-direction: row;
	top: 0;
	z-index: 1;
	background-color: #fff;
	width: 100%;
	height: 70px;
	align-items: center;
}

.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #536069;
	margin-left: 10px;
}

.serch {
	flex: 1;
	text-align: center;
	font-size: 16px;
	position: relative;
}
.serch > img {
	width: 12px;
	height: 12px;
	vertical-align: middle;
	position: absolute;
	left: 20px;
	top: 10px;
}
.serch > input {
	width: 90%;
	height: 30px;
	padding-left: 30px;
	border: 1px solid rgb(221, 231, 244);
	border-radius: 16.2px;
	color: #8c9ba7;
	font-family: Noto Sans SC;
	font-size: 14px;
	line-height: 15px;
	letter-spacing: -1px;
	text-align: left;
	/*去除阴影*/
	box-shadow: none;
	/*聚焦input的蓝色边框*/
	outline: none;
	/*textarea 禁止拖拽*/
	resize: none;
}
.menuItem {
	width: 35px;
}

.menuItem_Img {
	width: 24px;
	height: 24px;
	vertical-align: middle;
}
</style>
